import React, { Component } from 'react'
import Tabbar from '../Tabbar/Tabbar'
import styles from './Booktown.module.scss'
import Search from '../Search/Search'
import { Carousel,Icon } from 'antd-mobile';
import { getBooktownList } from '../../data/api'
import Recommend from '../Recommend/Recommend'
import ActiveBook from '../ActiveBook/ActiveBook'
import {withRouter} from 'react-router-dom'

class Booktown extends Component {
  constructor() {
    super()
    this.state = {
      BooktownList:[],
      swiperList: [],
      loading:true
    }
  }
  async componentDidMount() {
    let BooktownList = (await getBooktownList()).data
    this.setState({
      BooktownList : BooktownList,
      swiperList: BooktownList.slide.templateList,
      loading:false
    })
  }
  handleChange=(id) => {
    this.props.history.push('detailed/'+id)
  }
  handleBooks = (e) => {
   let index = e.target.getAttribute('index')
  this.props.history.push('sort/'+index)
  }
  componentWillUnmount() {
    this.setState = () => false;
  }

  render() {
    return (
      <div className={styles.booktownbox}>
        <div className={this.state.loading?'background':'hidder'}><Icon type={'loading'}/>加载中...</div>
        {/* 搜索框 */}
        <Search disabled={true} right={false}></Search>
        {/* 主要内容 */}
        <div className={styles.booktown}>
          {/* 轮播图 */}
          <div className={styles.swiper}>
            <Carousel
              autoplay={true}
              infinite={true}
            >
              {this.state.swiperList.map(val => (
                  <img
                    src={val.imgUrl}
                    onClick={this.handleChange.bind(this,val.id)}
                    key={val.id}
                    alt=""
                    style={{ width: '100%', verticalAlign: 'top' }}
                    onLoad={() => {
                      // fire window resize event to change height
                      window.dispatchEvent(new Event('resize'));
                      this.setState({ imgHeight: 'auto' });
                    }}
                  />
              ))}
            </Carousel>
          </div>
          {/* 男女按钮 */}
          <div className={styles.stencil}>
            <div className={styles.navi_bar}>
              <div className={styles.item}>
                <i index='1' onClick={this.handleBooks}></i>
                <span>男生</span>
              </div>
              <div className={styles.item}>
                <i index='2' onClick={this.handleBooks}></i>
                <span>女生</span>
              </div>
            </div>
          </div>
          {/* 男频主编推荐 */}
          <div>
            <Recommend title='男频主编推荐' right={false} recommendList={this.state.BooktownList.maleClassicFarm}></Recommend>
            <Recommend title='女频主编推荐' right={false} recommendList={this.state.BooktownList.femaleClassicHot}></Recommend>
          </div>
          {/* 男生爽文，女生畅销 */}
          <div>
            <ActiveBook title='男生爽文' activeBookList={this.state.BooktownList.maleClassicHot}></ActiveBook>
            <ActiveBook title='女生畅销' activeBookList={this.state.BooktownList.femaleClassicFarm}></ActiveBook>
          </div>
          {/* 男频最新爆款   女频最新红文 */}
          <div>
          <Recommend title='男频最新爆款' right={true} recommendList={this.state.BooktownList.hotRankMale}></Recommend>
          <Recommend title='女频最新红文' right={true} recommendList={this.state.BooktownList.hotRankFemale}></Recommend>
          </div>
          {/* 男频完结精品 女频完结精品 */}
          <div>
          <Recommend title='男频完结精品' right={true} recommendList={this.state.BooktownList.maleClassicSupremo}></Recommend>
          <Recommend title='女频完结精品' right={true} recommendList={this.state.BooktownList.femaleClassicSupremo}></Recommend>
          </div>
          <div className={styles.floot}>
            <div>------ 阿里文学出品 ------</div>
          </div>
        </div>
        {/* 底部 */}
        <Tabbar></Tabbar>
      </div>
    )
  }
}
export default withRouter(Booktown);
